<template>
  <!-- 项目实施 - 2计划编制 -->
  <div class="plan-preparation">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card top-card">
          <div slot="header" style="margin: 0;">
            <card-title title="在建项目"></card-title>
          </div>
          <el-row :gutter="12">
            <el-col :span="24">
              <el-form :inline="true" :model="formData" label-position="right" label-width="90px">
                <el-row :gutter="12">
                  <el-col :span="16" v-if="showSearch == false">
                    <advancedFilter></advancedFilter>
                  </el-col>
                  <el-col :span="6" v-if="showSearch">
                    <el-form-item label="项目名称">
                      <el-input v-model="formData.ipt1" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="showSearch">
                    <el-form-item label="项目编号">
                      <el-input v-model="formData.ipt2" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="showSearch">
                    <el-form-item label="项目类型">
                      <el-select v-model="formData.sel" multiple clearable placeholder="请选择..." style="width: 100%;">
                        <el-option label="资源类型一" value="shanghai"></el-option>
                        <el-option label="资源类型二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="showSearch ? 6 : 8" style="text-align: right;">
                    <el-button type="primary">筛选</el-button>
                    <el-button @click="resetForm">重置</el-button>
                    <el-button type="text" @click="changeSearch"> {{showSearch===true ? '高级筛选' : '普通筛选'}} </el-button>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
            <el-col :span="24">
              <cust-act-table
                ref="custActTable1"
                tableType="planPreparation"
                :list="tableData"
                :colConfigs="customColumns"
                @getDetail="getDetail"
                @changePage="changePage"
                @getSelectedRow="getSelectedRow"
                :pageNum="page.pageNum"
                :pageSize="page.pageSize"
                :total="page.total"
                showIdx
                showAct
                rKey="index"
              ></cust-act-table>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog class="table-modal" :title="modalType !== 'action' ? '查看' : '甘特图'" :visible.sync="modalState" @close="closeModal('modal')" :width="modalType == 'action' ? '85%' : '900px'" :close-on-click-modal="false">
      <el-image v-if="modalType == 'action'" class="cust-modal-bgi" :src="modalPic"></el-image>
      <div v-else>
        <formName :text="dialogFormName"></formName>
        <formTab :tabList="dialogFormTab" :actionTab="actTab" ref="formTab" @tabChange="tabChange"></formTab>
        <div v-if="actTab == '0'">
          <formPart listTitle="基本信息" ref="info1" modalTitle="TAB" :formList="formInfo.info1"></formPart>
        </div>
        <div v-if="actTab == '1'">
          <formPart listTitle="进度信息" ref="info2" modalTitle="TAB" :formList="formInfo.info2"></formPart>
        </div>
        <div v-if="actTab == '2'">
          <formPart listTitle="销售合同" ref="info31" modalTitle="TAB" :formList="formInfo.info3_1"></formPart>
          <formPart listTitle="客户信息" ref="info32" modalTitle="TAB" :formList="formInfo.info3_2"></formPart>
        </div>
        <div v-if="actTab == '3'">
          <formPart listTitle="团队成员" ref="info4" class="tab-table" modalTitle="TAB-TABLE" @tableAct="tableActState = true" :tip="formInfo.info4[0].tip" :formList="formInfo.info4"></formPart>
        </div>
        <div v-if="actTab == '4'">
          <formPart listTitle="项目文件" ref="info5" class="tab-table" modalTitle="TAB-TABLE-NOACT" :formList="formInfo.info5"></formPart>
        </div>
      </div>
    </el-dialog>

    <!-- 团队成员-弹窗 -->
    <el-dialog class="table-act-modal" title="工作报告查询" :visible.sync="tableActState" @close="closeModal('tableAct')" width="1200px" :close-on-click-modal="false">
      <cust-act-table
        ref="custActTable2"
        tableType=""
        :list="formInfo.info4[0].alertData"
        :colConfigs="formInfo.info4[0].alertCol"
        @getSelectedRow="showDetailModal"
        @changePage="changePageInfo4"
        :pageNum="formInfo.info4[0].page.pageNum"
        :pageSize="formInfo.info4[0].page.pageSize"
        :total="formInfo.info4[0].page.total"
        :showIdx="false"
        :showAct="false"
        rKey="index"
      ></cust-act-table>
    </el-dialog>
    <!-- 团队成员-弹窗-详情 -->
    <el-dialog class="table-act-modal" title="查询穿透显示" :visible.sync="detailModalState" @close="closeModal('detailModal')" width="1000px" :close-on-click-modal="false">
      <formName text="工作报告档案"></formName>
      <formPart :showListTitle="false" modalTitle="查看" ref="info41" :formList="formInfo.info4_1"></formPart>
      <formPart listTitle="基本信息" modalTitle="查看" ref="info42" :formList="formInfo.info4_2"></formPart>
      <formPart listTitle="任务进度" class="tab-table" ref="info43" modalTitle="TAB-TABLE-NOACT" :formList="formInfo.info4_3"></formPart>
    </el-dialog>
  </div>
</template>

<script>
import cardTitle from './components/title';
import formTab from './components/formTab';
import formName from './components/formName';
import formPart from './components/formPart';
import advancedFilter from './components/advancedFilter';
import { tableData2, customColumns2 } from './js/staticData';
import custActTable from "./components/custActTable.vue";
export default {
  name: "planPreparation",
  components: {cardTitle, custActTable, advancedFilter, formName, formTab, formPart},
  data() {
    return {
      formData: {
        ipt1: '',
        ipt2: '',
        sel: []
      },
      showSearch: true,
      customColumns: customColumns2,
      tableData: tableData2,
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      modalType: '',
      modalPic: require('./images/table2-action.png'),
      modalState: false,
      tableActState: false,
      detailModalState: false,
      dialogFormName: '项目档案', 
      actTab: '0',
      dialogFormTab: ['基本信息', '项目进度', '收款合同', '团队成员', '项目文件'],   
      formInfo: {
        info1: [
          { l: '项目名称', v: '蓝旗机器人造林', span: 12 },
          { l: '项目编号', v: 'XMBH202208057', span: 6 },
          { l: '项目状态', v: '执行', span: 6 },
          { l: '资金来源', v: '自筹资金', span: 6 },
          { l: '投资估算', v: '70,000.00', span: 6 },
          { l: '预计收入', v: '', span: 6 },
          { l: '立项日期', v: '2024-07-23', span: 6, color: '#11A389' },
          { l: '负责人', v: '朱冠', span: 6 },
          { l: '项目部门', v: '蓝旗机器人团队', span: 6 },
          { l: '所属单位', v: 'XX集团有限公司', span: 6 },
          { l: '事由及说明', v: '开展系统售前演示工作', span: 24 },
          { l: '可研报告', v: '可行性研究报告', type: 'doc', docInfo:{img: {
            path:require('./images/icon-doc2.png'), width: '12px', height: '14px'},text: '可行性研究报告.docx(11KB)'
          }, span: 12 },
          { l: '立项附件', v: '', span: 12 },
          { l: '预期成果', v: '按期完成项目交付，实现预期收益。。', span: 14 },
          { l: '取得成果', v: '', span: 12 },
          { l: '成果文件', v: '', span: 12 },
        ],
        info2: [
          { l: '计划工期', v: '123 天(自然日)', span: 6 },
          { l: '计划开始', v: '2024-07-20', span: 6 },
          { l: '计划完成', v: '2024-07-20', span: 6 },
          { l: '任务计划', v: '管理', type: 'button', span: 6 },
          { l: '实际工期', v: '0 天(自然日)', span: 6 },
          { l: '实际开始', v: '2024-07-20', span: 6 },
          { l: '实际结束', v: '', span: 6 },
          { l: '结项日期', v: '', span: 6 },
          { l: '项目进度', v: '80', type: 'progress', span: 12 },
        ],
        info3_1: [
          { l: '合同名称', v: 'XX有限责任公司系统建设', span: 12 },
          { l: '合同编号', v: 'SKHT2022080009', span: 6 },
          { l: '合同金额', v: '200,000.00', span: 6 }
        ],
        info3_2: [
          { l: '客户名称', v: 'XX有限责任公司', span: 12 },
          { l: '客户代表', v: 'KH2022000139', span: 6 },
          { l: '法人代表', v: '蒋丽', span: 6 }
        ],
        info4: [{
          tip: '提示：团队成员中的用户才能正常填报该项目业务单据',
          tableCol: [{ prop: 'name', label: '姓名'}, { prop: 'dep', label: '部门'}, { prop: 'xmjs', label: '项目角色'}, { prop: 'lxdh', label: '联系电话'}, { prop: 'zrsm', label: '责任说明' }],
          tableData: [{name: '云龙',dep: 'XX部门',xmjs: '项目负责人',lxdh: '18866668888', zrsm: ''}],
          alertCol: [{ prop: 'bgrq', label: '报告日期'}, { prop: 'bglx', label: '报告类型'}, { prop: 'bgr', label: '报告人'}, { prop: 'xmmc', label: '项目名称'}, {prop: 'xmbh', label: '项目编号'}, { prop: 'bgnr', label: '报告内容' }],
          alertData: [{bgrq: '2024-07-20', bglx: '日报', bgr: '朱冠', xmmc: '蚂蚁森林绿化改造', xmbh: 'XMBH202208056', bgnr: '完成启动阶段交接工作。'}],
          page: {
            pageNum: 1, // 当前页
            pageSize: 10, // 每页条数
            total: 0, // 总条数
          }
        }],
        info4_1: [
          { l: '报告人', v: '朱冠', span: 6 },
          { l: '报告日期', v: '2024-07-23', span: 6 },
          { l: '报告部门', v: 'XX部门', span: 6 },
          { l: '№', v: '工作进度报告-20220825015', span: 6 },
          { l: '报告单位', v: 'XX集团有限公司', span: 24 },
        ],
        info4_2: [
          { l: '项目名称', v: '蓝旗机器人造林', span: 12 },
          { l: '报告类型', v: '日报', span: 6 },
          { l: '工时合计', v: '8', span: 6 },
          { l: '项目编号', v: 'XMBH202208056', span: 6 },
          { l: '项目进度', v: '5 %', span: 6 },
          { l: '开始日期', v: '2024-07-10', span: 6 },
          { l: '完成日期', v: '2024-07-18', span: 6 },
          { l: '报告内容', v: '完成启动阶段交接工作。', span: 24 },
        ],
        info4_3: [{
          tableData: [
            {
              rwmc: '项目启动',
              trgs: '',
              wcb: '100 %',
              jhks: '2024-07-23',
              sjks: '2024-07-24',
              jhwcrq: '2024-07-24',
              sjwcrq: '2024-07-24',
              sjgq: '1',
              cgwj: ''
            },
            {
              rwmc: '商务实施交接',
              trgs: '8',
              wcb: '100 %',
              jhks: '2024-07-13',
              sjks: '2024-07-13',
              jhwcrq: '2024-07-23',
              sjwcrq: '2024-07-23',
              sjgq: '10',
              cgwj: ''
            },
            {
              rwmc: '商务交接完成',
              trgs: '0',
              wcb: '100 %',
              jhks: '2024-07-23',
              sjks: '2024-07-23',
              jhwcrq: '2024-07-23',
              sjwcrq: '2024-07-23',
              sjgq: '1',
              cgwj: ''
            }
          ],
          tableCol: [
            {
              label: '任务名称',
              prop: 'rwmc',
              align: 'center',
              width: 120
            },
            {
              label: '投入工时',
              prop: 'trgs',
              align: 'center',
              width: 80
            },
            {
              label: '完成比',
              prop: 'wcb',
              align: 'center'
            },
            {
              label: '开始日期',
              align: 'center',
              children: [
                {
                  label: '计划开始',
                  prop: 'jhks',
                  align: 'center',
                  width: 100
                },
                {
                  label: '实际开始',
                  prop: 'sjks',
                  align: 'center',
                  width: 100
                }
              ]
            },
            {
              label: '结束日期',
              align: 'center',
              children: [
                {
                  label: '计划完成日期',
                  prop: 'jhwcrq',
                  align: 'center'
                },
                {
                  label: '实际完成日期',
                  prop: 'sjwcrq',
                  align: 'center'
                }
              ]
            },
            {
              label: '实际工期',
              prop: 'sjgq',
              align: 'center',
            },
            {
              label: '成果文件',
              prop: 'cgwj',
              align: 'center',
            }
          ]
        }],
        info5: [{ 
          tableCol: [{ prop: 'wjmc', label: '文件名称'}, { prop: 'wjbh', label: '文件编号'}, { prop: 'cjrq', label: '出具日期'}, { prop: 'wjfj', label: '文件附件'}],
          tableData: []
        }],
      }
    };
  },
  watch: {
    tableData: {
      handler(n, o) {
        setTimeout(() => {
          document.querySelector('.border-r').style.height = `${document.querySelector('.cust-act-table').offsetHeight}px`;
        }, 10)
      },
      deep: true
    },
    modalType(n){},
  },
  mounted() {
    this.$nextTick(() => {
      this.tableData = tableData2;
      this.customColumns = customColumns2;
    })
  },
  methods: {
    /**
     * @author Wrl
     * 
     */
    tabChange(e) {
      this.actTab = e;
    },
    /**
     * @author Wrl
     * 重置查询条件
     */
    resetForm() {
      this.formData = {};
    },
    /**
     * @author Wrl
     * 切换查询条件
     */
    changeSearch() {
      this.showSearch = !this.showSearch
    },
    /**
     * @author Wrl
     * 点击列表 - 计划编制
     */
    getDetail() {
      setTimeout(() => {
        this.modalType = 'action'
        this.showModal()
      }, 10)
    },
    /**
     * @author Wrl
     * 点击列表行 - 查看
     */
    getSelectedRow() {
      this.modalType = 'row';
      setTimeout(() => {
        this.showModal()
      }, 20)
    },
    /**
     * @author Wrl
     * 显示弹窗
     */
    showModal() {
      this.modalState = true;
    },
    /**
     * @author Wrl
     * 关闭弹窗
     */
    closeModal(type) {
      if(type == 'modal') {
        this.modalType = '';
        this.modalState = false;
        this.actTab = '0';
      } else if(type == 'tableAct') {
        this.tableActState = false;
      } else if(type == 'detailModal') {
        this.detailModalState = false;
      }
      
    },
    /**
     * @author Wrl
     * 显示工作报告档案
     */
    showDetailModal() {
      this.detailModalState = true;
    },
		/**
		 * @author Wrl
		 * 获取分页信息
		 */
		changePage(page) {
			this.page.pageNum = page.pageNum; // 当前页
			this.page.pageSize = page.pageSize; // 每页条数
			this.page.total = page.total; // 总数
		},
    /**
     * @author Wrl
     * 获取弹窗列表分页信息
     */
    changePageInfo4(page) {
			this.formInfo.info4[0].page.pageNum = page.pageNum; // 当前页
			this.formInfo.info4[0].page.pageSize = page.pageSize; // 每页条数
			this.formInfo.info4[0].page.total = page.total; // 总数
		},
  }
};
</script>

<style lang="scss" scoped>
  .plan-preparation {
    padding: 16px;
    ::v-deep {
      .el-form-item {
        width: 100%;
      }
      .el-form-item__content {
        width: calc(100% - 90px);
      }
      .tab-table .el-card__body {
        padding: 15px 0;
      }
      .table-modal {
        .el-dialog {
          .el-dialog__body {
            padding: 0 20px 10px;
          }
        }
      }
    }
    .cust-modal-bgi {
      display: block;
      width: 95%;
      margin: 0 auto;
    }
  }
</style>